<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pages/address/address?source=1" class="address-section">
			<view class="order-content">
				<view class="cen" v-if="orderData.member_address" @click="navTo('address')">
					<view class="top">
						<text class="name fontWeight">{{orderData.member_address.name}}</text>
						<text class="mobile fontWeight ">{{orderData.member_address.mobile}}</text>
					</view>
					<text class="address">{{orderData.member_address.province}} {{orderData.member_address.city}}
						{{orderData.member_address.area}}</text>
				</view>
				<view class="cen" v-else @click="navTo('address')">
					<view class="font42 colorfont fontWeight">
						选择收货地址
					</view>
				</view>
				<text class="yticon icon-you"></text>
			</view>

			<image class="a-bg" src="/static/add-line.png"></image>
		</navigator>
		<view class="uni-list" v-if="orderData.pick_up_adress">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">
					<image src="../../static/home/order/switch.png" mode="widthFix"></image>
					门店自提
				</view>
				<switch @change="swirchChange($event)" color="#FF5E00" :checked="switchStatus" />
			</view>
			<navigator url="/pages/address/address?source=1" class="address-section" v-if="switchStatus">
				<view class="order-content">
					<view class="cen">
						<view class="top">
							<text class="name">{{orderData.pick_up_adress.name}}</text>
							<text class="mobile">{{orderData.pick_up_adress.mobile}}</text>
						</view>
						<text class="address">{{orderData.pick_up_adress.address}}</text>
					</view>
					<text class="yticon icon-you"></text>
				</view>
			</navigator>
		</view>
		<view class="goods-section" v-for="(item,index) in orderData.goods" :key="index">
			<view class="g-header b-b">
				<image class="logo" src="../../static/home/order/store.png" mode="widthFix"></image>
				<text class="name">{{item.shop_info.shop_name}}</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(childItem,childIndex) in item.list" :key="childIndex">
				<image :src="childItem.goods_info.goods_pic[0]"></image>
				<view class="right">
					<text class="title clamp">{{childItem.goods_info.goods_title}}</text>
					<text class="spec">{{childItem.goods_list_info.spec_txt}}</text>
					<view class="price-box">
						<text class="price">￥{{childItem.goods_list_info,userInfo.member_type | judge}}</text>
						<!-- <text class="price" v-else-if="userInfo.member_type==3">￥{{childItem.goods_list_info.vip_price | money}}</text> -->
						<!-- <text class="price" v-else>￥{{childItem.goods_list_info.sale_price | money}}</text> -->
						<view class="choose">
							<text class="sub" @click="sub(index,childIndex)">-</text>
							<text class="num">{{childItem.goods_total}}</text>
							<text class="add" @click="add(index,childIndex)">+</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠明细 -->
			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">配送方式</text>
					<text class="cell-tip ">
						{{switchStatus?'门店自提':'快递运输'}}
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">价格类型</text>
					<text class="cell-tip" v-if="userInfo.member_type==1">企业用户价</text>
					<text class="cell-tip" v-else-if="userInfo.member_type==2">钻石用户价</text>
					<text class="cell-tip" v-else-if="userInfo.member_type==3">贵宾用户价</text>
					<text class="cell-tip" v-else>普通用户价</text>
				</view>
				<view class="yt-list-cell b-b" @click="navTo('billing')">
					<text class="cell-tit clamp">开具发票</text>
					<text class="cell-tip">{{invoiceName}}
						<text class="yticon icon-you"></text>
					</text>
				</view>
				<view class="yt-list-cell desc-cell">
					<text class="cell-tit clamp">备注</text>
					<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{productTotalPrice}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip" v-if="switchStatus">免运费</text>
				<text class="cell-tip" v-else>{{express_price | money}}</text>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付</text>
				<text class="price-tip">￥</text>
				<text class="price">{{totalPrice}}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		money,
		judge
	} from '@/common/util'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				maskState: 0, //优惠券面板显示状态
				desc: '', //备注
				payType: 1, //1微信 2支付宝
				orderPutData: {}, //接收相关条件数据
				orderData: {}, //订单数据
				switchStatus: false, //快递方式
				invoiceName: '请选择发票',
				invoiceId: '',
				totalPrice: 0, //总价格
				xuniaRR: [],
				goodsTotal: 1,
				productTotalPrice: 0,
				express_price: 0,
			}
		},
		onLoad(option) {
			let goodsList = {};
			for (let item of JSON.parse(option.initParams).list) {
				let list = {
					list: [item]
				}
				if (!goodsList[item.cid]) {
					goodsList[item.cid] = list
				} else {
					goodsList[item.cid].push(list)
				}
			}
			let orderData = {
				init_param: JSON.stringify(goodsList)
			}
			this.orderPutData = orderData
			this.loadData(this);
		},
		onShow() {

		},
		methods: {
			// 加载数据
			loadData(that) {
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.orderPreSubmit,
						data: that.orderPutData
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							that.orderData = _data.result;
							console.log(_data.result.goods)
							let totalPrice = 0
							for (var key of Object.keys(_data.result.goods)) {
								let resultGoodsList = _data.result.goods[key].list;
								let memberType = that.$store.state.userInfo.member_type;
								that.express_price += _data.result.goods[key].express_price;
								resultGoodsList.forEach(item => {
									if (memberType == 1 || memberType == 2) {
										totalPrice += item.goods_list_info.svip_price * item.goods_total
									} else if (memberType == 3) {
										totalPrice += item.goods_list_info.vip_price * item.goods_total
									} else {
										totalPrice += item.goods_list_info.sale_price * item.goods_total
									}

								})
							}
							that.productTotalPrice = money(totalPrice);
							that.totalPrice = money(totalPrice + that.express_price);
						}
					})
			},
			// 跳转发票
			navTo(url) {
				this.$Router.push({
					name: url
				})
			},
			// 切换快递方式
			swirchChange(e) {
				this.switchStatus = e.detail.value
			},
			//显示优惠券面板
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			changePayType(type) {
				this.payType = type;
			},
			//增加数量
			add(index, childIndex) {
				let that = this;
				let orderShop = that.orderData.goods[index];
				let orderGoods = orderShop.list[childIndex];
				let storeUserInfo = that.$store.state.userInfo;
				orderGoods.goods_total++;
				let totalPrices = (judge(orderGoods.goods_list_info, storeUserInfo.member_type) * orderGoods.goods_total);
				that.productTotalPrice = totalPrices;
				that.totalPrice = totalPrices + orderShop.express_price;
			},
			//减少数量
			sub(index, childIndex) {
				let that = this;
				let orderShop = that.orderData.goods[index];
				let orderGoods = orderShop.list[childIndex];
				let storeUserInfo = that.$store.state.userInfo;
				if (orderGoods.goods_total <= 1) {
					return;
				}
				orderGoods.goods_total--;
				let totalPrices = (judge(orderGoods.goods_list_info, storeUserInfo.member_type) * orderGoods.goods_total);
				that.productTotalPrice = totalPrices;
				that.totalPrice = totalPrices + orderShop.express_price;
			},

			submit() {
				let that = this
				if (!that.orderData.member_address) {
					that.$api.msg('请选择地址')
					return;
				}
				let objData={};
				for (var key of Object.keys(that.orderData.goods)) {
					let resultGoodsList = that.orderData.goods[key].list;
					objData[key] = {info:{
						express_method:that.switchStatus ? 2 : 1,
						invoice_id:that.invoiceId,
						member_remarks: that.desc
					}},
					console.log(resultGoodsList)
					let arr = [];
					resultGoodsList.forEach(item => {
						console.log(item)
						let itemObj = {
							goods_id:item.goods_id,
							goods_list_id:item.goods_list_id,
							goods_total:item.goods_total
						}
						arr.push(itemObj)
					})
					objData[key]['list'] = arr
				}
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.orderSubmit,
						data: {
							order_data:JSON.stringify(objData),
							address: JSON.stringify( that.orderData.member_address)
						} 
					})
					.then(result => {
						let _data = result.data;
						console.log(_data)
						if (_data.code === 200) {
							this.$api.msg('提交订单成功');
							that.payOrder(_data.result.oid, that);
						}
					})
			},
			// 付款
			payOrder(oid, that) {
				// uni.login({
				// 	provider: 'weixin',
				// 	success: function(loginRes) {
				// 		console.log(loginRes.code);
						
				// 	}
				// });
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.wxpayAppPay,
						data: {
							oid: oid,
							openid: orderNumber,
							client: 2
						}
					})
					.then(result => {
						let _data = result.data;
						console.log(_data)
						if (_data.code === 200) {
							uni.requestPayment({
								timeStamp: _data.result.timeStamp,
								nonceStr: _data.result.nonceStr,
								package: _data.result.package,
								signType: _data.result.signType,
								paySign: _data.result.paySign,
								success: function(result) {
									uni.showToast({
										title: '支付成功',
										icon: "success",
										mask: true,
										success: function() {
											that.$Router.replace({
												name: 'orderDetail',
												params: {
													shopId: that.orderData.orderGoodsInfoVoList[0].shopId,
													orderNumber: orderNumber
												}
											});
										}
									})
								},
								fail: function(results) {
									console.log(result)
									uni.showToast({
										title: '支付失败,请重新支付',
										icon: "none",
										success() {
											that.$Router.push({
												name: 'orderDetail',
												params: {
													shopId: that.orderData.orderGoodsInfoVoList[0].shopId,
													orderNumber: orderNumber
												}
											});
										}
									})
								},
								complete: function(data) {
									console.log(data)
								}
							})
						}
					})
			},
			stopPrevent() {}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}

	.uni-list {
		margin: 20upx 0;
		border-radius: 10upx;

		.address-section {
			padding: 20upx 0 30upx 0;

		}

		&::before {
			height: 0;
		}

		&::after {
			height: 0;
		}

		.uni-list-cell {
			&::after {
				height: 0;
			}
		}

		.uni-list-cell-db {
			font-size: 26upx;
			display: flex;
			align-items: center;
			font-weight: bold;

			image {
				width: 36upx;
				height: auto;
				margin-right: 20upx;
			}
		}
	}

	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;
		min-height: 200rpx;
		display: flex;
		align-items: center;

		.order-content {
			display: flex;
			align-items: center;
			width: 100%;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
			padding-left: 40upx;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 36upx;
			height: auto;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 180upx;
				height: 180upx;
				border-radius: 20upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;
				justify-content: space-between;

				.price {
					margin-bottom: 4upx;
					color: #FE2130;
					font: 40upx;
				}

				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}

				.choose {
					display: flex;
					align-items: center;
				}

				.sub,
				.add {
					width: 40upx;
					height: 40upx;
					text-align: center;
					line-height: 40upx;
					background: rgba(245, 245, 250, 1);
					border-radius: 8upx 0px 0px 8upx;
					display: inline-block;
				}

				.num {
					width: 60upx;
					height: 40upx;
					background: rgba(229, 229, 229, 1);
					text-align: center;
					line-height: 40upx;
					display: inline-block;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.title {
			font-size: 26upx;
			color: #0B0E11;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: #0B0E11;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-8e8;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}

		.icon-alipay {
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color;
		}

		.tit {
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			color: $base-color;
			margin-left: 8upx;
		}

		.price {
			font-size: 42upx;
			color: #FE2130;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280upx;
			height: 70upx;
			color: #fff;
			font-size: 32upx;
			background-color: #FF2300;
			border-radius: 60upx;
			margin-right: 30rpx;
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}

		.time {
			font-size: 24upx;
			color: $font-color-light;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}

		.price {
			font-size: 44upx;
			color: $base-color;

			&:before {
				content: '￥';
				font-size: 34upx;
			}
		}

		.tips {
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}

		.circle {
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6upx;
			}
		}
	}
</style>
